<div id="once-chart" class="row">

    <style>
        .nav-tabs-custom .chart { position: relative; height: 300px; }
        .nav-tabs-diy { background: #ffffff; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); }
    </style>

    <div class="col-md-12">

        <{if $chart.type == 'tab'}>
        <div class="nav-tabs-custom">
            <!-- Tabs within a box -->
            <ul class="nav nav-tabs">
                <{foreach from=$chart.main item=item key=key}>
                <li><a data-toggle="tab" class="chart-tab" href="#<{$key}>-chart"><{$item.name}></a></li>
                <{/foreach}>
            </ul>
            <div class="tab-content no-padding">
                <!-- Morris chart - Sales -->
                <{foreach from=$chart.main item=item key=key}>
                <div id="<{$key}>-chart" class="chart tab-pane active"></div>
                <{/foreach}>
            </div>
        </div>
        <{elseif $chart.type == 'float'}>

        <{foreach from=$chart.main item=item key=key name=foo}>
        <div class="nav-tabs-diy" style="width: 49.5%; padding: 10px 20px; <{if $smarty.foreach.foo.index % 2 == 1}>float:right;<{else}>float:left;<{/if}> margin-bottom: 10px;">
            <div id="<{$key}>-chart" style="height:300px;" class="chart tab-pane active"></div>
        </div>
        <{/foreach}>
        <div style="clear:both; margin-bottom: 10px;"></div>

        <{/if}>
    </div>

    <script src="/public/static/plugin/echarts/echarts-plain-map.js"></script>
    <script src="/public/static/plugin/echarts/echarts.config.js"></script>
    <script>
        var onceChart = {
            init: function (id, options) {
                // 主题
                var theme = chartConfig.theme;

                var chart = echarts.init(document.getElementById(id), theme);
                $("#"+id).data('eCharts', chart);
                chart.setOption(options);
            }
        };

        $(function(){
            // 缺省配置
            var defaultOptions = chartConfig.defaultOptions;

            <{foreach from=$chart.main item=item key=key name=foo}>
                var settingOptions = defaultOptions['<{$item.base}>'] || defaultOptions['base'];
                var dataOptions = $.parseJSON('<{$item.data nofilter}>');

                var newOptions = $.extend(true, { } , settingOptions, dataOptions);
                onceChart.init('<{$key}>-chart', newOptions);
                
                if(dataOptions.series.length == 0){
                    $('#<{$key}>-chart div:first').append('<div class="chart-mask"><div class="value"><i class="fa fa-inbox"></i>&nbsp;&nbsp;<{$item.name}> - 暂无图表数据</div></div>')
                }else{
                    $('#<{$key}>-chart div.chart-mask').remove()
                }

            <{/foreach}>

            if($("a.chart-tab").length > 0) $("a.chart-tab").first().click();
        });
    </script>

</div>

<style type="text/css">
    .chart-mask{
        width: 100%;
        height: 100%;
        z-index: 2;
        position: absolute;
        left: 0;
        top: 0;
    }
    .chart-mask .value{
        position: absolute;
        width: 200px;
        height: 20px;
        top : 50%;
        left: 50%;
        margin-top: -10px;
        margin-left: -100px;
        text-align: center;
        font-size: 14px;
        color: #aaa;
    }
</style>
